<template>
  <el-dialog
    class="modify-class"
    width="500px"
    title="变更计划节点"
    :append-to-body="true"
    visible
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
  <el-form class="modify-form mt20" :model="formData" label-width="120px">
    <el-form-item label="预计完成节点" prop="planTime">
      <el-date-picker class="date-picker" v-model="formData.planTime" value-format="yyyy-MM-dd" type="date" placeholder="请选择" :clearable="false" style="width: 100%;" />
    </el-form-item>
    <el-form-item label="实际完成情况" prop="complete">
      <el-select v-model="formData.complete" class="modify-select" style="width: 100%;" >
        <el-option value="1" label="已完成"/>
        <el-option value="0" label="未完成"/>
      </el-select>
    </el-form-item>
    <!-- popper-class="table-select-poppper" -->
    <el-form-item label="导致变更原因" prop="changeReson">
      <el-select v-model="formData.changeReson" class="modify-select" style="width: 100%;" >
        <el-option value="JSZTBH" label="技术状态变化"/>
        <el-option value="ZLWT" label="质量问题"/>
        <el-option value="NBGLYY" label="内部管理原因"/>
      </el-select>
    </el-form-item>
  </el-form>
  <div class="dialog-footer" slot="footer">
    <el-button class="btn-comfirm" type="primary" @click="saveHandle">确认</el-button>
    <el-button class="btn-cancel" @click="cancelHandle">取消</el-button>
  </div>
  </el-dialog>
</template>

<script>
import overviewApis from '@/apis/overview/index.js'
const dateUtil = require('element-ui/lib/utils/date-util.js')


export default {
  props: {
    params: {
      type: Object,
      default() {
        return {
          billId: '',
          type: ''
        }
      }
    }
  },
  data() {
    return {
      formData: {
        complete: '',
        planTime: '',
        changeReson: ''
      },
    }
  },
  methods: {
    close(refresh) {
      this.$emit("close", refresh);
    },
    beforeClose() {
      this.close(false);
    },
    saveHandle() {
      const params = {}

      Object.keys(this.formData).forEach(key => {
        if (this.formData[key]) {
          params[key] = this.formData[key]
        }
      })

      overviewApis.saveProgressRecord({
        ...this.params,
        ...params
      }).then(() => {
        this.close(true)
      })
    },
    cancelHandle() {
      this.close(false)
    },
    requestLastData() {
      overviewApis.selectLastByBillId(this.params).then(({data = {}}) => {
        this.formData.planTime = data.planTime ? dateUtil.formatDate(new Date(data.planTime), 'yyyy-MM-dd') : null
        this.formData.complete = data.complete === undefined ? '' : data.complete + ''
        this.formData.changeReson = data.changeReson ?  data.changeReson.code : ''
      })
    }
  },
  mounted() {
    this.requestLastData()
  }
}
</script>

<style>

</style>